// Encaptsulating bootstrap styling (to avoid conflect with Django admin style).
$blue: #6C55A3;
$lightblue: #3c8dbc;
$navy: #001f3f;
$teal: #39cccc;
$olive: #3d9970;
$lime: #01ff70;
$orange: #ff851b;
$fuchsia: #f012be;
$purple: #605ca8;
$maroon: #d81b60;
$black: #111;
$gray-x-light: #d2d6de;

:root {
    --border-color: #{lighten($blue, 30%)} !important;
    --border-color-outline: #{rgba($blue, .3)} !important;
}

:root .admin-interface {

    --admin-interface-title-color: #F5DD5D;
    --admin-interface-logo-color: #FFFFFF;
    --admin-interface-env-color: #E74C3C;
    --admin-interface-header-background-color: #{$blue} !important;
    --admin-interface-header-text-color: #{lighten($blue, 10%)} !important;
    --admin-interface-header-link-color: #FFFFFF;
    --admin-interface-header-link_hover-color: #C9F0DD;
    --admin-interface-module-background-color: #{lighten($blue, 10%)} !important;
    --admin-interface-module-background-selected-color: #{lighten($blue, 40%)} !important;
    --admin-interface-module-text-color: #FFFFFF;
    --admin-interface-module-link-color: #FFFFFF;
    --admin-interface-module-link-selected-color: #FFFFFF;
    --admin-interface-module-link-hover-color: #C9F0DD;
    --admin-interface-generic-link-color: #{$blue} !important;

    --admin-interface-generic-link-hover-color: #{darken($blue, 10%)} !important;
    --admin-interface-save-button-background-color: #{$blue} !important;
    --admin-interface-save-button-background-hover-color: #{darken($blue, 10%)} !important;
    --admin-interface-save-button-text-color: #FFFFFF;
    --admin-interface-delete-button-background-color: #BA2121;
    --admin-interface-delete-button-background-hover-color: #A41515;
    --admin-interface-delete-button-text-color: #FFFFFF;
    --admin-interface-related-modal-background-color: #000000;
    --admin-interface-related-modal-background-opacity: 0.3;
    --admin-interface-main-border-top: 10px solid var(--admin-interface-module-background-color);
    --admin-interface-log-max-width: min(400px, 100%);
    --admin-interface-log-max-height: 100px;
    --admin-interface-related-modal-border-radius: 4px;
    --admin-interface-module-border-radius: 4px;
    --admin-interface-jsoneditor-border-radius: var(--admin-interface-module-border-radius);
    --admin-interface-jsoneditor-overflow: hidden;
    --admin-interface-related-modal-close-button-display: unset;
}

.bp {
    // loading Bootstrap 4
    //@import "bootstrap/scss/bootstrap.scss";

    //@import "admin-lte/dist/css/alt/adminlte.light.css";
    @import "admin-lte/build/scss/adminlte.scss";
}

//@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

/*======================= Customizing AdminLTE 3 ========================*/

.bp .table th,
.bp .table td {
    vertical-align: middle;
}

.lcs_switch.lcs_on {
    background-color: $blue !important;
}

.bp #clicks-over-time {
    width: 100%;
    max-height: 400px;
    min-height: 250px;
}

.bp #top-locations {
    width: 100%;
    height: 100%;
}
.bp #top-devices {
    width: 100%;
    height: 100%;
    min-width: 300px;
}

.bp #top-os {
    width: 100%;
    height: 100%;
    min-width: 300px;
}

.bp #top-browsers {
    width: 100%;
    height: 100%;
    min-width: 300px;
}

@media screen and (min-width: 700px)
{
    .bp #top-devices {
        min-height: 320px;
    }
}

@media screen and (max-width: 480px){
    .graph-section {
        padding: 0.2em !important;
    }
}
